import { ref, computed } from "vue";
import { defineStore } from "pinia";
import {useOtherStore} from "./other";
import axios from "axios";

export const useVideoStore = defineStore(
  "video",
  () => {
    /**
     * 当前播放视频索引
     */
    let videoIndex = ref(0);

    /**
     * 当前播放视频地址                          
     */
    let videoUrl = computed(() => {
      return videoUrlList.value[videoIndex.value];
    });

    /**
     * 视频地址列表
     */
    let videoUrlList = ref<string[]>([]);

    /**
     * 上一曲按钮是否可用
     */
    let isPreviousButtonShow = computed(() => {
      return !(videoIndex.value == 0);
    });

    /**
     * 下一曲按钮是否正在加载中
     */
    let isNextButtonLoading = ref(false);

    /**
     * 初始化
     * @returns {void}
     */
    function init() {
      //如果没有视频则获取视频
      if (videoUrlList.value.length == 0) {
        getVideoJson(false);
      }
    }

  /**
   * 获取视频Json
   * @param {boolean} [op=true] -是否是初始化以外的操作
   * @returns {void}
   */
    function getVideoJson(op: boolean = true) {
      axios
        .get("http://api.treason.cn/API/nan.php")
        .then(function (response) {
          const data = response.data;
          //判断是否重复
          if (op && videoUrlList.value.find((item) => item == data)) {
            console.log("重复");
            getVideoJson();
          } else {
            //去掉最后两个字符
            const url = data.substring(0, data.length - 2);
            videoUrlList.value.push(url);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    }

    /**
     * 点击上一曲按钮
     */
    function previousVideo() {
      if (videoIndex.value > 0) {
        videoIndex.value--;
      }
    }

  
    /**
     * 点击下一曲按钮
     */
    async function nextVideo() {
      if (videoIndex.value < videoUrlList.value.length - 1) {
        videoIndex.value++;
      } else {
        isNextButtonLoading.value = true;
        await getVideoJson();
        isNextButtonLoading.value = false;
        videoIndex.value++;
      }
    }

    /**
     * 获取其他模块的数据
     */
    function getOtherData() {
      return useOtherStore().getDoubleMess();
    }

    return {
      /**
       * 当前播放视频索引
       * @type {number}
       */
      videoIndex,

      /**
       * 当前播放视频地址
       * @type {string}
       */
      videoUrl,

      /**
       * 视频地址列表
       * @type {Array<string>}
       */
      videoUrlList,

      /**
       * 上一曲按钮是否可用
       * @type {boolean}
       */
      isPreviousButtonShow,

      /**
       * 下一曲按钮是否正在加载中
       * @type {boolean}
       */
      isNextButtonLoading,

      /**
       * 初始化
       * @returns {void}
       */
      init,

      /**
       * 点击上一曲按钮
       * @returns {void}
       */
      previousVideo,

      /**
       * 点击下一曲按钮
       * @returns {void}
       */
      nextVideo,

      /**
       * 获取其他模块的数据
       * @returns {string}
       */
      getOtherData
    };
  },
  {
    persist:{
      key:"videoData",//可以指定存储的key（即存入的名字）
      storage:sessionStorage,//可以指定存储的存储方式:1. sessionStorage(会话储存，临时) 2. localStorage（本地储存，永久）
      // paths:["videoUrlList"]//可以指定需要存储的内容(计算属性别存啊，存了也无效的)
    }
  }
);
